@import "common";
.btn{
  display: block;
  width: 5.9rem;
  height: 0.96rem;
  font-size: 0.32rem;
  color: #ffffff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 0px;
  background: #3d5aff;
  margin: 0 auto;
}
.center{
  text-align: center;
  color: #ffffff;
  font-size: 0.24rem;
  padding: 0 0.5rem;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.html{
  background-size: 100% 100%;
  overflow: hidden;
  width: $warp-width;
  height: $warp-height;
}
.share{
  @extend .html;
  background: url($share-bg) no-repeat center center;
  background-size: 100% 100%;
  .hotel-name{
    text-align: center;
    font-size: $hotel-font;
    color: $hotel-color;
    margin-top: 2.9rem;
  }
  .share-btn{
      @extend .btn;
      margin-top:4.44rem;
  }

}
.shared{
    width: 100%;
    height: 100%;
    background: url($shared-bg) no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    .share-btn{
      @extend .btn;
      position: absolute;
      bottom: 1.5rem;
      left: 50%;
      margin-left: -2.95rem;
  }
}
.red-envelope{
  height: $red-h;
  width: $red-w;
  background: url($red-bg) no-repeat center center;
  margin:0 auto;
  margin-top: 0.32rem;
  background-size: 100% 100%; 
  .left-red{
    width:2.9rem;
    height: 2.6rem;
    float: left;
    .money{
      font-size: 0.4rem;
      color: $hotel-color;
      display: inline-block;
      margin:{
        top: 1.32rem;
        left: 0.52rem;
      }
    }
    .money-num{
      font-size:1.3rem ;
      color: $hotel-color;
      display: inline-block;
      margin:{
        top: 0.3rem;
        left:-0.16rem;
      }
    }
  }
  .right-red{
    width:4.23rem;
    height: 2.6rem;
    float: left;
    .teitel{
        @extend .center;
        margin-top: 0.4rem;
        font-size: 0.36rem;
    }
    .jianman{
      @extend .center;
      margin-top: 0.11rem;
    }
    .afterTeitel{
      @extend .center;
      margin-top: 0.62rem;
      font-size: 0.36rem;
    }
    .afterJianman{
      @extend .center;
      margin-top: 0.28rem;
    }
    .afterLine{
      height: 0.02rem;
      background: #ffa08b;
      margin: 0 auto;
      margin-top: 0.3rem;
      width: 2.52rem;
    }
    .time{
      @extend .center;
//    margin-top: 0.1rem;
    }
    .shiyong{
      @extend .center;
      //margin-top: 0.1rem;
    }
  }
}
//分享二维码页
.afterShare{
  @extend .html;
  background: url($after) no-repeat center center;
  background-size: 100% 100%;
  .pHeight{
      height: 3.22rem;
  }
}
.shareCode{
  width: $code;
  height: $code;
  background: $codeBG;
  margin: 0 auto;
  margin-top: 3.6rem;
  overflow: hidden;
  img{
    display: block;
    width: $codeImg;
    height: $codeImg;
    margin: 0.2rem;
  }
}
.codeText{
  text-align: center;
  font-size: $hotel-font;
  color: $hotel-color;
  margin-top: 0.28rem;
  
}
//领取页面
.receive{
  @extend .html;
  background: url($receive-bg) no-repeat;
  background-size: 100% 100%;
  input[type=number]::-webkit-input-placeholder{
    color: $color;
  }
  input[type=number]:-ms-input-placeholder{
    color: $color;
  }
  .tel{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:2px solid $color;
    border-radius: 10px;
    width: 5.9rem;
    height: 0.96rem;
    background: rgba(18,23,53,0.7);
    margin: 0 auto;
    margin-top: 9.92rem;
    display: block;
    text-align: center;
    font-size: $hotel-font;
    color:$color ;
  }
  .receive-btn{
    @extend .btn;
    margin-top: 0.4rem;
    margin-bottom: 1.8rem;
  }
}
.showImg{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;left: 0;
    background:rgba(0,0,0,0.6) url(../img/alertShare.png) no-repeat 76% 10%;
    background-size: 5.05rem 4.46rem;
    display: none;
}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .share {
        background: url($share-bg2) no-repeat center center;
        background-size: 100% 100%;
    }
    .share .hotel-name{
        margin-top: 3.5rem;
    }
    .share .share-btn{
        margin-top: 7.04rem;
    }
    .shareCode{
        margin-top: 5rem;
    }
    .receive {
        background: url($receive-bg2) no-repeat;
        background-size: 100% 100%;
    }
    .receive .tel{
        margin-top: 12.32rem;
    }
    .afterShare {
        background: url($after2) no-repeat center center;
        background-size: 100% 100%;
        .pHeight{
            height: 4.04rem;
        }
    }
    .html{
      background-size: 100% 100%;
      overflow: hidden;
      width: $warp-width;
      height: $warp-heightX;
    }
} 
@media only screen and (device-width: 360px) and (device-height: 748px) and (-webkit-device-pixel-ratio: 3) {
    .share {
        background: url($share-bg2) no-repeat center center;
        background-size: 100% 100%;
    }
    .share .hotel-name{
        margin-top: 3.5rem;
    }
    .share .share-btn{
        margin-top: 7.04rem;
    }
    .shareCode{
        margin-top: 5rem;
    }
    .receive {
        background: url($receive-bg2) no-repeat;
        background-size: 100% 100%;
    }
    .receive .tel{
        margin-top: 12.32rem;
    }
    .afterShare {
        background: url($after2) no-repeat center center;
        background-size: 100% 100%;
        .pHeight{
            height: 4.04rem;
        }
    }
    .html{
      background-size: 100% 100%;
      overflow: hidden;
      width: $warp-width;
      height: $warp-heightX;
    }
   
} 

